import styles from "@styles/channel.module.less";
import GeekIcon from "@shared/geekIcon";
import React, { useRef } from "react";
import { useTypedSelector } from "@store/index";
import { selectToken } from "@slice/credential";
import UserChannel from "@pages/home/widgets/userChannel";
import GuestChannel from "@pages/home/widgets/guestChannel";
import Slide, { SlideRef } from "@shared/slide";
import UpdateUserChannel from "@pages/home/widgets/updateUserChannel";
import UpdateGuestChannel from "@pages/home/widgets/updateGuestChannel";
import { useNavigate } from "react-router-dom";

export default function Channel() {
  const token = useTypedSelector(selectToken);
  const slideRef = useRef<SlideRef | null>(null);
  const navigate = useNavigate();
  return (
    <div className={styles.container}>
      {token ? <UserChannel /> : <GuestChannel />}
      <div className={styles.aside}>
        <div className={styles.search} onClick={() => navigate("/search")}>
          <GeekIcon type={"iconbtn_search"} className={styles.search_icon} />
        </div>
        <div className={styles.menu}>
          <GeekIcon
            onClick={() => slideRef.current?.open()}
            type={"iconbtn_channel"}
            className={styles.channel_icon}
          />
        </div>
      </div>
      <Slide ref={slideRef} direction={"toRight"}>
        {token ? (
          <UpdateUserChannel slideRef={slideRef} />
        ) : (
          <UpdateGuestChannel slideRef={slideRef} />
        )}
      </Slide>
    </div>
  );
}
